<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>

  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Advanced form elements</title>
    <jsp:include page="../cssList.jsp" flush="true"/>

</head>

  <body class="hold-transition sidebar-mini">
    <div class="wrapper">
      <jsp:include page="../topMenu.jsp" flush="true"/>
      <jsp:include page="../leftMenu.jsp" flush="true"/>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1>Advanced Form</h1>
              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item active">Advanced Form</li>
                </ol>
              </div>
            </div>
          </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            <!-- SELECT2 EXAMPLE -->
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title">Select2</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Minimal</label>
                      <select class="form-control select2" style="width: 100%;">
                        <option selected="selected">Alabama</option>
                        <option>Alaska</option>
                        <option>California</option>
                        <option>Delaware</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Washington</option>
                      </select>
                    </div>
                    <!-- /.form-group -->
                    <div class="form-group">
                      <label>Disabled</label>
                      <select class="form-control select2" disabled="disabled" style="width: 100%;">
                        <option selected="selected">Alabama</option>
                        <option>Alaska</option>
                        <option>California</option>
                        <option>Delaware</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Washington</option>
                      </select>
                    </div>
                    <!-- /.form-group -->
                  </div>
                  <!-- /.col -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Multiple</label>
                      <select class="form-control select2" multiple="multiple" data-placeholder="Select a State"
                              style="width: 100%;">
                        <option>Alabama</option>
                        <option>Alaska</option>
                        <option>California</option>
                        <option>Delaware</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Washington</option>
                      </select>
                    </div>
                    <!-- /.form-group -->
                    <div class="form-group">
                      <label>Disabled Result</label>
                      <select class="form-control select2" style="width: 100%;">
                        <option selected="selected">Alabama</option>
                        <option>Alaska</option>
                        <option disabled="disabled">California (disabled)</option>
                        <option>Delaware</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Washington</option>
                      </select>
                    </div>
                    <!-- /.form-group -->
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
                the plugin.
              </div>
            </div>
            <!-- /.card -->

            <div class="row">
              <div class="col-md-6">

                <div class="card card-danger">
                  <div class="card-header">
                    <h3 class="card-title">Input masks</h3>
                  </div>
                  <div class="card-body">
                    <!-- Date dd/mm/yyyy -->
                    <div class="form-group">
                      <label>Date masks:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- Date mm/dd/yyyy -->
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- phone mask -->
                    <div class="form-group">
                      <label>US phone mask:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-phone"></i></span>
                        </div>
                        <input type="text" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- phone mask -->
                    <div class="form-group">
                      <label>Intl US phone mask:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-phone"></i></span>
                        </div>
                        <input type="text" class="form-control"
                               data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- IP mask -->
                    <div class="form-group">
                      <label>IP mask:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-laptop"></i></span>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->

                <div class="card card-info">
                  <div class="card-header">
                    <h3 class="card-title">Color & Time Picker</h3>
                  </div>
                  <div class="card-body">
                    <!-- Color Picker -->
                    <div class="form-group">
                      <label>Color picker:</label>
                      <input type="text" class="form-control my-colorpicker1">
                    </div>
                    <!-- /.form group -->

                    <!-- Color Picker -->
                    <div class="form-group">
                      <label>Color picker with addon:</label>

                      <div class="input-group my-colorpicker2">
                        <input type="text" class="form-control">

                        <div class="input-group-append">
                          <span class="input-group-text"><i class="fa fa-square"></i></span>
                        </div>
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- time Picker -->
                    <div class="bootstrap-timepicker">
                      <div class="form-group">
                        <label>Time picker:</label>

                        <div class="input-group">
                          <input type="text" class="form-control timepicker">

                          <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-clock-o"></i></span>
                          </div>
                        </div>
                        <!-- /.input group -->
                      </div>
                      <!-- /.form group -->
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->

              </div>
              <!-- /.col (left) -->
              <div class="col-md-6">
                <div class="card card-primary">
                  <div class="card-header">
                    <h3 class="card-title">Date picker</h3>
                  </div>
                  <div class="card-body">
                    <!-- Date range -->
                    <div class="form-group">
                      <label>Date range:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="fa fa-calendar"></i>
                          </span>
                        </div>
                        <input type="text" class="form-control float-right" id="reservation">
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- Date and time range -->
                    <div class="form-group">
                      <label>Date and time range:</label>

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fa fa-clock-o"></i></span>
                        </div>
                        <input type="text" class="form-control float-right" id="reservationtime">
                      </div>
                      <!-- /.input group -->
                    </div>
                    <!-- /.form group -->

                    <!-- Date and time range -->
                    <div class="form-group">
                      <label>Date range button:</label>

                      <div class="input-group">
                        <button type="button" class="btn btn-default float-right" id="daterange-btn">
                          <i class="fa fa-calendar"></i> Date range picker
                          <i class="fa fa-caret-down"></i>
                        </button>
                      </div>
                    </div>
                    <!-- /.form group -->

                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->

                <!-- iCheck -->
                <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title">iCheck - Checkbox &amp; Radio Inputs</h3>
                  </div>
                  <div class="card-body">
                    <!-- Minimal style -->

                    <!-- checkbox -->
                    <div class="form-group">
                      <label>
                        <input type="checkbox" class="minimal" checked>
                      </label>
                      <label>
                        <input type="checkbox" class="minimal">
                      </label>
                      <label>
                        <input type="checkbox" class="minimal" disabled>
                        Minimal skin checkbox
                      </label>
                    </div>

                    <!-- radio -->
                    <div class="form-group">
                      <label>
                        <input type="radio" name="r1" class="minimal" checked>
                      </label>
                      <label>
                        <input type="radio" name="r1" class="minimal">
                      </label>
                      <label>
                        <input type="radio" name="r1" class="minimal" disabled>
                        Minimal skin radio
                      </label>
                    </div>

                    <!-- Minimal red style -->

                    <!-- checkbox -->
                    <div class="form-group">
                      <label>
                        <input type="checkbox" class="minimal-red" checked>
                      </label>
                      <label>
                        <input type="checkbox" class="minimal-red">
                      </label>
                      <label>
                        <input type="checkbox" class="minimal-red" disabled>
                        Minimal red skin checkbox
                      </label>
                    </div>

                    <!-- radio -->
                    <div class="form-group">
                      <label>
                        <input type="radio" name="r2" class="minimal-red" checked>
                      </label>
                      <label>
                        <input type="radio" name="r2" class="minimal-red">
                      </label>
                      <label>
                        <input type="radio" name="r2" class="minimal-red" disabled>
                        Minimal red skin radio
                      </label>
                    </div>

                    <!-- Minimal red style -->

                    <!-- checkbox -->
                    <div class="form-group">
                      <label>
                        <input type="checkbox" class="flat-red" checked>
                      </label>
                      <label>
                        <input type="checkbox" class="flat-red">
                      </label>
                      <label>
                        <input type="checkbox" class="flat-red" disabled>
                        Flat green skin checkbox
                      </label>
                    </div>

                    <!-- radio -->
                    <div class="form-group">
                      <label>
                        <input type="radio" name="r3" class="flat-red" checked>
                      </label>
                      <label>
                        <input type="radio" name="r3" class="flat-red">
                      </label>
                      <label>
                        <input type="radio" name="r3" class="flat-red" disabled>
                        Flat green skin radio
                      </label>
                    </div>
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer">
                    Many more skins available. <a href="http://fronteed.com/iCheck/">Documentation</a>
                  </div>
                </div>
                <!-- /.card -->
              </div>
              <!-- /.col (right) -->
            </div>
            <!-- /.row -->
          </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
      </div>
      <!-- /.content-wrapper -->
      <jsp:include page="../bottomRightsInfo.jsp" flush="true"/>

    </div>
    <!-- ./wrapper -->

    <jsp:include page="../scriptList.jsp" flush="true"/>

    <!-- Page script -->
    <script>
      $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date range picker
        $('#reservation').daterangepicker()
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({
          timePicker         : true,
          timePickerIncrement: 30,
          format             : 'MM/DD/YYYY h:mm A'
        })
        //Date range as a button
        $('#daterange-btn').daterangepicker(
          {
            ranges   : {
              'Today'       : [moment(), moment()],
              'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month'  : [moment().startOf('month'), moment().endOf('month')],
              'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment().subtract(29, 'days'),
            endDate  : moment()
          },
          function (start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
          }
        )

        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
          checkboxClass: 'icheckbox_minimal-blue',
          radioClass   : 'iradio_minimal-blue'
        })
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
          checkboxClass: 'icheckbox_minimal-red',
          radioClass   : 'iradio_minimal-red'
        })
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
          checkboxClass: 'icheckbox_flat-green',
          radioClass   : 'iradio_flat-green'
        })

        //Colorpicker
        $('.my-colorpicker1').colorpicker()
        //color picker with addon
        $('.my-colorpicker2').colorpicker()

        //Timepicker
        $('.timepicker').timepicker({
          showInputs: false
        })
      })
    </script>
  </body>
</html>
